<template>
  <div class="group-content">
    <div class="operation">
      <slot name="title">
        <span>操作</span>
      </slot>
      <div>
        <i @click="edit()" class="iconfont iconbianji1"></i>
        <i class="iconfont iconshanchu1 delete" @click="groupDelete()"></i>
      </div>
    </div>
    <div class="group-list">
      <ul>
        <li v-for="(item,index) in unitList" :class="{active:index==listCurrent}" :key="item.id">
          <div @click="addClass(index)" class="list-content item" v-if="item.isEdit === false">
            <slot name="ico">
              <a-icon type="bank" />
            </slot>
            <span class="item-name">{{item.unitName}}</span>
          </div>
          <div class="list-content edit" v-else>
            <slot name="ico">
              <a-icon type="bank" />
            </slot>
            <a-input class="edit-input" v-model="item.unitName" />
            <a-icon type="check-circle" @click="saveEditInput()" />
            <a-icon type="close-circle" @click="cancelEdit(index)" />
          </div>
        </li>
      </ul>
      <div class="add-btn" v-if="isShowAddBtn">
        <a-button @click="addList()" type="primary" block>
          <a-icon type="plus-circle" />添加
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    groupList: {
      type: Array,
      default: () => []
    },
    isShowAddBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listCurrent: 0,
      unitList: [],
      //新增的数据序号
      newIndex: 0,
      isNew: false,
      editstate: false,
      storageInput:""
    };
  },
  watch: {
    groupList: {
      handler(newV) {
        this.unitList = newV;
      },
      deep: true
    }
  },
  mounted() {
    this.unitList = this.groupList;
    this.addClass(this.listCurrent);
  },
  methods: {
    groupDelete() {
      var _this = this;
      this.$confirm({
        title: "您是否确认要删除所选项？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          var nextId
          if (_this.listCurrent === _this.unitList.length - 1) {
            nextId = null;
          } else {
            nextId = _this.unitList[_this.listCurrent + 1].id;
          }
          var param = {
            id: _this.unitList[_this.listCurrent].id,
            nextId: nextId
          };
          _this.editstate = false;
          _this.$emit("deleteList", param);
        }
      });
    },
    cancelEdit() {
      if (this.isNew === true) {
        this.unitList.pop();
        this.isNew = false
      } else {
        this.unitList[this.listCurrent].isEdit = false;
        this.unitList[this.listCurrent].unitName = this.storageInput
      }
      this.editstate = false;
    },
    edit() {
      this.editstate = true;
      this.unitList[this.listCurrent].isEdit = true;
      this.storageInput = this.unitList[this.listCurrent].unitName
    },
    addClass(index) {
      if (this.editstate === true && this.unitList[index].isEdit === false) {
        this.$message.warning("请先保存编辑内容");
        return false;
      }
      this.listCurrent = index;
      this.$emit("itemClick", this.unitList[index]);
    },
    saveEditInput() {
      if (this.unitList[this.newIndex].unitName === "" ||this.unitList[this.listCurrent].unitName === "") {
        this.$message.warning("编辑内容不能为空");
        return false;
      } else {
        this.editstate = false;
        var param 
        if (this.isNew === true) {
          this.unitList[this.newIndex].isEdit = false;
          this.isNew = false;
          //var grouplist = this.unitList[this.newIndex]
          param = {
            type: "add",
            grouplist: this.unitList[this.newIndex]
          };
        } else {
          this.unitList[this.listCurrent].isEdit = false;
          //var grouplist = this.unitList[this.listCurrent]
          param = {
            type: "edit",
            grouplist: this.unitList[this.listCurrent]
          };
        }
        this.$emit("saveList", param);
      }
    },
    deleteItem(index) {
      var nextId
      if (this.isNew === true) {
        this.unitList.pop();
      } else {
        if (index === this.unitList.length - 1) {
          nextId = null;
        } else {
          nextId = this.unitList[index + 1].id;
        }
        var param = {
          id: this.unitList[index].id,
          nextId: nextId
        };
        this.editstate = false;
        this.$emit("deleteList", param);
      }
    },
    addList() {
      if (this.editstate === true) {
        this.$message.warning("请先保存编辑内容");
        return false;
      } else {
        this.editstate = true;
        this.isNew = true;
        this.newIndex = this.unitList.length;
        this.unitList.push({
          isEdit: true,
          unitName: "",
          id: ""
        });
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.group-content {
  height: 100%;

  .add-btn {
    width: 95%;
    margin: 0 auto;
  }

  .operation {
    font-size: 16px;
    color: #919191;
    margin: 10px 0 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 20px 0 10px;
    align-items: center;

    i {
      color: #6cb3fb;
      font-size: 20px;
      cursor: pointer;
    }

    .delete {
      margin-left: 20px;
    }
  }

  .group-list {
    height: 84%;
    overflow-y: auto;
    padding-bottom: 40px;

    li {
      div.list-content {
        color: #555555;
        font-size: 18px;
        padding: 10px 0 10px 44px;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 10px;
        border-radius: 5px 0 0 5px;
        cursor: pointer;

        span {
          width: 95%;
          display: inline-block;
          box-sizing: border-box;
          line-height: 1.5;
        }

        .anticon-bank, .anticon-user {
          position: absolute;
          top: 14px;
          left: 15px;
        }

        .anticon-check-circle {
          position: absolute;
          top: 14px;
          right: -30px;
        }

        .anticon-close-circle {
          position: absolute;
          top: 14px;
          right: -60px;
        }
      }

      div.edit {
        width: 78%;
        padding: 7.5px 0 7.5px 44px;

        .anticon-check-circle {
          color: #0485fc;
        }

        .anticon-close-circle {
          color: #0485fc;
        }
      }
    }

    li.active {
      div.list-content {
        color: #0485fc;
        background: #ffffff;
      }

      div.edit {
        color: #555555;
      }
    }

    li {
      div.item:hover {
        color: #0485fc;
        background: #ffffff;
      }
    }
  }
}
</style>